<template>
  <div class="info">
    <h3 class="infoTitle">{{itemcontent.result.skuInfo.title}}</h3>
    <div class="price">
      <div class="nowprice">{{itemcontent.result.itemInfo.price}}       {{itemcontent.result.itemInfo.discountDesc}}
        <!-- <img :src="itemcontent.result.itemInfo.imUrl" alt=""> -->
      </div>
      <div class="oldprice">{{itemcontent.result.itemInfo.oldPrice}}</div>
    </div>
    <div class="desc">{{itemcontent.result.itemInfo.desc}}</div>
    <div class="expressinfo" >
      <div class="expressitem" v-for="item in itemcontent.result.columns">{{item}}</div>
    </div>
    <div class="shopinfo" id="shopinfo">
      <a :href="itemcontent.result.shopInfo.shopUrl">
        <img :src="itemcontent.result.shopInfo.shopLogo" alt="" id="shopicon">
        {{itemcontent.result.shopInfo.name}}
      </a>
      <div class="shopscore">
        <div v-for="item in itemcontent.result.shopInfo.score">
          <img :src="itemcontent.result.shopInfo" alt="">
          {{item.name}} {{item.score}}
        </div>
      </div>
      <div class="shopservice">
        <div v-for="item in itemcontent.result.shopInfo.services" class="forflex">
          <img :src="item.icon" alt="">
          <div class="shopname">{{item.name}}</div>
        </div>
      </div>
      
    </div>
    <div class="wearInfo">
      <img :src="item" alt="" v-for="item in itemcontent.result.detailInfo.detailImage[0].list">
    </div>
    <div class="goodsParam" id="param">
      <div class="clothInfo" v-for="item in itemcontent.result.itemParams.info.set">{{item.key}}: {{item.value}}</div>
    </div>
    <div class="rate" id="rate">
      用户：{{itemcontent.result.rate.list[0].user.uname}} <br>
      <br>
      评价：{{itemcontent.result.rate.list[0].content}}
      <br>
    </div>
    
  </div>
</template> 
<script>

  export default{
    name:'info',
    props:{
      itemcontent:{
        type:Object,
        default(){
          return {}
        }
      },
    },

  }
</script> 
<style scoped>
  .infoTitle{
    font-weight: normal;
    padding-top: 10px;
    border-bottom: 1px solid #e6e6e6;
    /* color: ; */
    box-shadow: 0px 1px 10px rgba(100, 100, 100, .3);
  }
  .price{
    margin-top: 10px;
    display: flex;
    
  }
  .nowprice{
    flex: 1;
    color:var(--color-tint);
    font-size: 25px;
  }
  .oldprice{
    flex: 1;
    color: gray;
    text-decoration: line-through;
  }
  .desc{
    margin-top: 10px;
  }
  .expressinfo{
    display: flex;
    box-shadow: 0px 1px 10px rgba(100, 100, 100, .3);
  }
  .expressitem{
    margin-top: 10px;
    flex: 1;
    padding: 0 25px;
  }
  .shopinfo{
    margin-top: 3px;
    padding-top: 15px;
    display: flex;
    text-align: center;
    height: 200px;
    box-shadow: 0px 1px 10px rgba(100, 100, 100, .3);

  }
  .shopinfo a{
    height: 150px;
    font-size: 12px;
  }
  .shopinfo #shopicon{
    display: block;
  }
  .shopinfo img{
    flex: 1;
    width: 50px;
    margin: 20px;
    
  }
  .shopinfo .shopscore{
    flex: 1;
    text-align: center;
    font-size: 14px;
  }
  .shopinfo .shopservice{
    flex: 1;
    font-size: 12px;
    vertical-align: middle;
  }
  .shopinfo .shopservice img{
    /* float: left; */
    width: 15px;
    margin: 0;
  }
  .shopinfo .shopservice .forflex{
    margin: 10px;
  }
  .wearInfo img{
    width: 100%;
  }
  .goodsParam .clothInfo{
    padding: 10px;
    border-bottom: 1px solid rgba(100, 100, 100, .3);
  }
  .rate{
    padding: 50px 0px;
  }

</style>